<div class="container-fluid">
  <div class="row row-deck pt-5">
    <% apps.forEach(function (app) {%>
      <div class="col-md-3 mb-5">
        <div class="card">
          <div class="card-status-top bg-indigo"></div>
          <a href="/apps/<%= app.name %>" style="text-decoration: none; color: inherit;">
            <div class="card-body">
              <div class="card-title text-primary">
                <strong>
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3"></polyline>
                    <line x1="12" y1="12" x2="20" y2="7.5"></line>
                    <line x1="12" y1="12" x2="12" y2="21"></line>
                    <line x1="12" y1="12" x2="4" y2="7.5"></line>
                  </svg>
                  <%= app.name %>
                </strong>
                <% if(app.status === "online"){ %>
                  <span class="badge bg-green-lt"><%= app.status %></span>
                <% } else{ %>  
                  <span class="badge bg-red-lt"><%= app.status %></span>
                <% } %>
              </div>
              <h4 class="text-secondary">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <rect x="3" y="4" width="18" height="8" rx="3"></rect>
                  <rect x="3" y="12" width="18" height="8" rx="3"></rect>
                  <line x1="7" y1="8" x2="7" y2="8.01"></line>
                  <line x1="7" y1="16" x2="7" y2="16.01"></line>
                </svg>
                CPU : <%= app.cpu %> %</h4>
              <h4 class="text-secondary">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop-analytics" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <rect x="3" y="4" width="18" height="12" rx="1"></rect>
                  <path d="M7 20h10"></path>
                  <path d="M9 16v4"></path>
                  <path d="M15 16v4"></path>
                  <path d="M9 12v-4"></path>
                  <path d="M12 12v-1"></path>
                  <path d="M15 12v-2"></path>
                  <path d="M12 12v-1"></path>
                </svg>
                Memory : <%= app.memory %></h4>
              <h4 class="text-secondary">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4"></path>
                  <circle cx="18" cy="18" r="4"></circle>
                  <path d="M15 3v4"></path>
                  <path d="M7 3v4"></path>
                  <path d="M3 11h16"></path>
                  <path d="M18 16.496v1.504l1 1"></path>
                </svg>
                Uptime : <%= app.uptime %></h4>
            </div>
          </a>
          <div class="card-footer text-center">
            <% if(app.status === "online"){ %>
              <button class="btn btn-sm btn-green" aria-label="Button" onclick="pm2AppAction('<%= app.name %>', 'reload')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
                  <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
               </svg>
               Reload
              </button>
              <button class="btn btn-sm btn-cyan" aria-label="Button" onclick="pm2AppAction('<%= app.name %>', 'restart')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path>
                  <line x1="5.63" y1="7.16" x2="5.63" y2="7.17"></line>
                  <line x1="4.06" y1="11" x2="4.06" y2="11.01"></line>
                  <line x1="4.63" y1="15.1" x2="4.63" y2="15.11"></line>
                  <line x1="7.16" y1="18.37" x2="7.16" y2="18.38"></line>
                  <line x1="11" y1="19.94" x2="11" y2="19.95"></line>
               </svg>
               Restart
              </button>
              <button class="btn btn-sm btn-danger" aria-label="Button" onclick="pm2AppAction('<%= app.name %>', 'stop')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-minus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <circle cx="12" cy="12" r="9"></circle>
                  <line x1="9" y1="12" x2="15" y2="12"></line>
               </svg>
               Stop
              </button>
            <% } else{ %> 
              <button class="btn btn-sm btn-cyan" aria-label="Button" onclick="pm2AppAction('<%= app.name %>', 'restart')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path>
                  <line x1="5.63" y1="7.16" x2="5.63" y2="7.17"></line>
                  <line x1="4.06" y1="11" x2="4.06" y2="11.01"></line>
                  <line x1="4.63" y1="15.1" x2="4.63" y2="15.11"></line>
                  <line x1="7.16" y1="18.37" x2="7.16" y2="18.38"></line>
                  <line x1="11" y1="19.94" x2="11" y2="19.95"></line>
               </svg>
               Restart
              </button>
            <% } %>
          </div>
        </div>
      </div>
    <% })%>
  </div>
</div>
